<template>
  <div class="w-full h-full mt-[70px] no-scrollbar">
    <!-- PC端 -->
    <div class="w-full hidden md:flex mb-[16px] direction-column">
      <div class="w-full flex justify-center relative">
        <el-image class="w-[100%]  h-[658px]" :src="bgImgPath?.bgImg27" lazy />
        <!-- v-else-if=" currentLanguage === 'en'" -->
        <div v-if="currentLanguage === 'en'" class="w-full absolute top-1/2 left-[200px] transform -translate-y-1/2 p-4">
          <div class="text-blue-600">
            <div class="w-[960px] text-[70px] md:text-[85px] mb-4 font-bold text-[#ff6839]">
              {{ aboutConfig?.title }}
            </div>
          </div>
        </div>
        <div v-else class="w-full absolute top-1/2 left-1/4 transform -translate-y-1/2 p-4">
          <div class="text-blue-600">
            <div class="w-[960px] text-[70px] md:text-[85px] mb-4 font-bold text-[#ff6839]">
              {{ aboutConfig?.title }}
            </div>
          </div>
        </div>
      </div>
      <div class="w-full flex relative mt-[16px] bg-[#f2f2f2]">
        <!-- <el-image class="w-[100%]" :src="bgImgPath?.bgImg4" lazy /> -->
        <div class="container">
          <div class="text-white">
            <div class="text-[25px] mb-2 mt-2 font-bold text-[#3498db]">
              {{ aboutConfig?.subtitle }}
            </div>
          </div>
          <div class="text-[15px] text-gray-600 mb-[16px]">
            {{ aboutConfig?.content }}
          </div>
        </div>
      </div>
      <div class="relative container mt-[16px]">
        <div class="flex items-center">
          <div class="w-[100px] h-[100px] bg-[#3498db] flex items-center justify-center rounded-md">
            <el-image class="w-[60px] h-[60px]" :src="iconPath?.icon5" lazy />
          </div>
          <div class="text-[25px] font-bold text-[#3498db] w-[260px] text-center ml-[50px]">
            {{ aboutConfig?.team[0].name }}
            <div class="dots"></div>
          </div>
          <div class="text-[15px] text-gray-600 w-[58%]  ml-[50px]">
            {{ aboutConfig?.team[0].content }}
          </div>
        </div>
        <div class="flex items-center ml-[5%] mt-[20px]">
          <div class="w-[100px] h-[100px] bg-[#3498db] flex items-center justify-center rounded-md">
            <el-image class="w-[60px] h-[60px]" :src="iconPath?.icon4" lazy />
          </div>
          <div class="text-[25px] font-bold text-[#3498db] w-[260px] text-center ml-[50px]">
            {{ aboutConfig?.team[1].name }}
            <div class="dots"></div>
          </div>
          <div class="text-[15px] text-gray-600 max-w-[55%]  ml-[50px]">
            {{ aboutConfig?.team[1].content }}
          </div>
        </div>
        <div class="flex items-center ml-[10%] mt-[20px]">
          <div class="w-[100px] h-[100px] bg-[#3498db] flex items-center justify-center rounded-md">
            <el-image class="w-[60px] h-[60px]" :src="iconPath?.icon5" lazy />
          </div>
          <div class="text-[25px] font-bold text-[#3498db] w-[260px] text-center ml-[50px]">
            {{ aboutConfig?.team[2].name }}
            <div class="dots"></div>
          </div>
          <div class="text-[15px] text-gray-600 max-w-[52%]  ml-[50px]">
            {{ aboutConfig?.team[2].content }}
          </div>
        </div>
        <div class="flex items-center ml-[15%] mt-[20px]">
          <div class="w-[100px] h-[100px] bg-[#3498db] flex items-center justify-center rounded-md">
            <el-image class="w-[60px] h-[60px]" :src="iconPath?.icon4" lazy />
          </div>
          <div class="text-[25px] font-bold text-[#3498db] w-[260px] text-center ml-[50px]">
            {{ aboutConfig?.team[3].name }}
            <div class="dots"></div>
          </div>
          <div class="text-[15px] text-gray-600 max-w-[46%]  ml-[50px]">
            {{ aboutConfig?.team[3].content }}
          </div>
        </div>

      </div>
      <div class="w-full container flex relative mt-[26px] mb-[26px]">
        <el-image class="w-[100%]" v-if="currentLanguage === 'tl'" :src="traditional?.bgImg15" lazy />
        <el-image class="w-[100%]" v-else-if="currentLanguage === 'en'" :src="english?.bgImg15" lazy />
        <el-image class="w-[100%]" v-else :src="chinese?.bgImg15" lazy />
      </div>
    </div>
    <!-- 移动端 -->
    <div class="md:hidden">
      <AboutMobile></AboutMobile>
    </div>
    <ContactUs></ContactUs>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useConfig } from '@/composables/useConfig'
import bgImgPath from "./bgImgPath/index";
import chinese from "./bgImgPath/chinese";
import english from "./bgImgPath/english";
import traditional from "./bgImgPath/traditional";
import iconPath from "./bgImgPath/iconPath";
import { useI18n } from "vue-i18n";
import ContactUs from "./ContactUs.vue";
import AboutMobile from "./AboutMobile.vue";


const { getAboutConfig } = useConfig();
const aboutConfig = computed(() => getAboutConfig());
const { locale } = useI18n();
const currentLanguage = computed(() => locale.value);

onMounted(() => {
})
</script>

<style scoped>
/* 隐藏所有方向的滚动条 */
.no-scrollbar {
  /* width: 100vw; */
  /* height: calc(100vh - 96px); */
  overflow-y: auto;
  -ms-overflow-style: none;
  /* IE/Edge */
  scrollbar-width: none;
  /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}

/* 自定义样式 */
.direction-column {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dots {
  flex: 1;
  height: 2px;
  position: relative;
  background-image: radial-gradient(circle, #3498db 1px, transparent 1px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
  background-position: 6px 0;
  /* 跳过第一个位置 */
  margin-top: 8px;
}

/* 第一个大点 */
.dots::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  /* 大点直径 */
  height: 10px;
  background-color: #3498db;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* 居中对齐到基线 */
  top: 50%;
  /* 垂直居中 */
}
</style>